<template>
  <div class="box-right device-info"
    id="card"
    style="width: 996px; height: 562px; margin-top: 40px">
    <canvas id="canvas"
      v-if="planeImgUrl != ''"></canvas>
  </div>
</template>

<script>
import { fabric } from "fabric";
export default {
  name: "PlanModel",
  props: {
    systemMsg: {
      type: Object,
      default: null,
    },
  },
  data () {
    return {
      planeImgUrl: "",

      canvasWidth: 0,
      canvasHeight: 0,
      canvasObj: null,

      deviceTypeList: [
        {
          label: "温感",
          value: 1,
          imgName: "device_temperature_sensation",
        },
        {
          label: "烟感",
          value: 2,
          imgName: "device_smoke_sensation",
        },

        {
          label: "手报",
          value: 3,
          imgName: "device_hand_newspaper",
        },
        {
          label: "天然气",
          value: 37,
          imgName: "device_natural_gas",
        },
        {
          label: "其他",
          value: -1,
          imgName: "device_other",
        },
      ],
      imgH: 0,
      imgW: 0,
      scale: 1,
      initImgW: 0,
      initImgH: 0,
      PO: {
        x: 0,
        y: 0,
      },
      ctx: null,
      img: null,
      isAddDevice: true,
      beginX: 0,
      beginY: 0,
    };
  },
  mounted () {
    this.getPlaneImgUrl();
  },
  methods: {
    getPlaneImgUrl () {
      this.planeImgUrl = this.systemMsg.imgUrl;
      // this.planeImgUrl =
      //   'http://47.106.193.127:8231/uploads/GridFile/image/20220519/3239af8133d5411d830549a2ec7392b3.jpg'
      if (this.planeImgUrl && this.planeImgUrl != "") {
        this.drawCanvas();
      }
    },
    resetCanvas () {
      if (this.canvasObj != null) this.canvasObj.setViewportTransform([1, 0, 0, 1, 0, 0]);
    },
    drawCanvas () {
      this.planeImgElement = document.createElement("img");
      this.planeImgElement.src = this.planeImgUrl;
      this.planeImgElement.onload = () => {
        const cw = this.planeImgElement.width;
        const ch = this.planeImgElement.height;
        this.canvasWidth = cw;
        this.canvasHeight = ch;

        this.canvasObj = new fabric.Canvas("canvas", {
          // preserveObjectStacking: false, // 禁⽌选中图层时⾃定置于顶部
          fireRightClick: true, // 启用右键，button的数字为3
          stopContextMenu: true, // 禁止默认右键菜单
        });

        // 滚轮缩放
        this.canvasObj.on("mouse:wheel", (opt) => {
          const delta = opt.e.deltaY; // 滚轮，向上滚一下是 -100，向下滚一下是 100
          let zoom = this.canvasObj.getZoom(); // 获取画布当前缩放值
          zoom *= 0.999 ** delta;
          if (zoom > 20) zoom = 20;
          if (zoom < 0.01) zoom = 0.01;

          // 以左上角为原点
          // this.canvas.setZoom(zoom)

          // 以鼠标所在位置为原点缩放
          this.canvasObj.zoomToPoint(
            {
              // 关键点
              x: opt.e.offsetX,
              y: opt.e.offsetY,
            },
            zoom
          );
          opt.e.preventDefault();
          opt.e.stopPropagation();
        });
        let isDragging = false;
        let lastPosX = 0;
        let lastPosY = 0;
        // alt+按下鼠标事件
        this.canvasObj.on("mouse:down", (opt) => {
          var evt = opt.e;
          if (evt.altKey === true) {
            isDragging = true;
            lastPosX = evt.clientX;
            lastPosY = evt.clientY;
          }
        });

        // 移动鼠标事件
        this.canvasObj.on("mouse:move", (opt) => {
          if (isDragging) {
            var e = opt.e;
            var vpt = this.canvasObj.viewportTransform;
            vpt[4] += e.clientX - lastPosX;
            vpt[5] += e.clientY - lastPosY;
            this.canvasObj.requestRenderAll();
            lastPosX = e.clientX;
            lastPosY = e.clientY;
          }
        });

        // 松开鼠标事件
        this.canvasObj.on("mouse:up", (opt) => {
          this.canvasObj.setViewportTransform(this.canvasObj.viewportTransform);
          isDragging = false;
        });

        this.canvasObj.setWidth(this.canvasWidth); //设置画布宽度
        this.canvasObj.setHeight(this.canvasHeight); //设置画布⾼度

        this.canvasObj.setBackgroundImage(
          this.planeImgUrl,
          this.canvasObj.renderAll.bind(this.canvasObj),
          {
            scaleY: 1,
            scaleX: 1,
          }
        );

        if (
          this.systemMsg.positionX &&
          this.systemMsg.positionY &&
          this.systemMsg.positionX != "" &&
          this.systemMsg.positionY != ""
        ) {
          this.toAddDevicePoint(
            this.systemMsg.positionX,
            this.systemMsg.positionY,
            this.systemMsg.deviceSource
          );

          const a = document.getElementById("card");
          //  a.onscroll = function() {
          //  console.log('a.scrollTop=',a.scrollTop)
          //  console.log('a.scrollLeft=',a.scrollLeft)
          //  }
          a.scrollLeft = this.systemMsg.positionX - 240; // 480
          a.scrollTop = this.systemMsg.positionY - 300; // 600
        }
      };
    },

    toAddDevicePoint (x, y, id) {
      let imgPrefix = "device_other";
      this.deviceTypeList.forEach((item) => {
        if (item.value == Number(this.systemMsg.deviceType)) {
          imgPrefix = item.imgName;
        }
      });

      let imgStr = "";
      if (
        this.systemMsg && this.systemMsg.alarmName && (
          this.systemMsg.alarmName.indexOf("报警") > -1 ||
          this.systemMsg.alarmName.indexOf("火警") > -1)
      ) {
        imgStr = imgPrefix + "_" + "alarm";
      } else {
        imgStr = imgPrefix + '_' + 'fault'
      }

      const img = new Image();
      const imgWidth = 38;
      const imgHeight = 32;

      img.src = require(`../../assets/alarm-dialog/${imgStr}.png`);
      img.style.width = imgWidth + "px";
      img.style.height = imgHeight + "px";
      img.onload = () => {
        const devicePointImg = new fabric.Image(img, {
          left: x - imgWidth / 2,
          top: y - imgHeight / 2,
          width: imgWidth,
          height: imgHeight,
          id: id,
        });
        devicePointImg.hasBorders = false; //“hasBorders” 和“hasControls”属性来控制对象的边框和顶点的可见性。
        devicePointImg.hasControls = false;
        devicePointImg.hoverCursor = "pointer"; // 鼠标移动到对象上的样式（默认值：move）
        devicePointImg.moveCursor = "pointer"; // 对象拖动时的鼠标样式（默认值：move）
        devicePointImg.selectable = false;

        this.canvasObj.add(devicePointImg);
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.box-right {
  flex: 1;
  height: 100;
  // margin-left: 10px;
  // overflow: auto;
  overflow: hidden;
  position: relative;
}

.device-info {
  width: 100%;
  height: 100%;
}

.device-info::-webkit-scrollbar-track-piece {
  background: #d3dce6;
}

.device-info::-webkit-scrollbar {
  width: 6px;
  height: 8px;
}

.device-info::-webkit-scrollbar-thumb {
  background: #99a9bf;
  border-radius: 20px;
}

.twinkle {
  animation: star 1.5s ease-in infinite;
}

@keyframes star {
  0% {
    opacity: 0.5;
    filter: alpha(opacity=50);
    transform: scale(1);
  }

  50% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: scale(1.1);
  }

  100% {
    opacity: 0.5;
    filter: alpha(opacity=50);
    transform: scale(1);
  }

  // 0% {
  //   opacity: 1;
  // }

  // 100% {
  //   opacity: 0;
  // }
}</style>
